<template>
  <div>
    <application-header
      title="启动次数"
      @getTime="handleGetTime"
      @getChannel="handleGetChannel"
      @getVersion="handleGetVersion"
    />
    <div class="operationCounts-container">
      <div class="operationCounts-tabs">
        <div class="chart-wrapper">
          <line-chart
            name="启动次数"
            xAxisName="时间"
            :height="hourHeight"
            :chartData="chartData"
          />
        </div>
        <a-radio-group style="display: none" v-model="value" @change="onChange">
          <a-radio-button value="a" disabled> 小时 </a-radio-button>
          <a-radio-button value="b"> 天 </a-radio-button>
          <a-radio-button value="c" disabled> 周 </a-radio-button>
          <a-radio-button value="d" disabled> 月 </a-radio-button>
        </a-radio-group>
      </div>
      <el-link
        style="margin-left: 16px"
        @click="changePutAwayStatus"
        type="primary"
        :underline="false"
        >{{ putAwayName }}明细数据<i
          :class="[
            isPutAway ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
            'el-icon--right',
          ]"
        ></i
      ></el-link>
      <div class="operationCounts-tables">
        <a-table
          v-if="isPutAway"
          :pagination="pagination"
          rowKey="id"
          :columns="columns"
          :data-source="data"
          @change="onChangePagination"
        ></a-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import ApplicationHeader from "@/components/ApplicationHeader";
import LineChart from "@/echartsComponent/LineChart.vue";
import {
  getYearMonthDayFromOne,
  getYearMonthDay,
  getFromDay1ToDay2,
} from "@/utils/functions";
import { getSelectOpenCountInDay } from "@/api/operationCounts";

const columns = [
  {
    title: "日期",
    dataIndex: "date",
  },
  {
    title: "启动次数",
    dataIndex: "count",
  },
];

function onChangePagination(pagination, filters, sorter) {
  console.log("params", pagination, filters, sorter);
}

export default {
  name: "NewUsers",
  data() {
    return {
      value: "a",
      hourHeight: "350px",
      chartData: {
        xAxisData: [],
        yAxisData: [],
      },
      pagination: {
        pageSize: 10,
        total: 0,
      },
      isPutAway: true,
      data: [],
      columns,
      selectOpenCountInDayData: {
        appKey: "",
        startDate: null,
        endDate: null,
        channel: null,
        version: null,
      },
    };
  },
  components: {
    ApplicationHeader,
    LineChart,
  },
  computed: {
    putAwayName() {
      return this.isPutAway ? "收起" : "展开";
    },
    ...mapGetters(["applicationId"]),
  },
  methods: {
    async handleGetTime(msg) {
      this.selectOpenCountInDayData.startDate = msg[0];
      this.selectOpenCountInDayData.endDate = msg[1];
      await this.getSelectOpenCountInDayData(this.selectOpenCountInDayData);
    },
    async handleGetChannel(msg) {
      this.selectOpenCountInDayData.channel = msg.key;
      await this.getSelectOpenCountInDayData(this.selectOpenCountInDayData);
    },
    async handleGetVersion(msg) {
      this.selectOpenCountInDayData.version = msg.key;
      await this.getSelectOpenCountInDayData(this.selectOpenCountInDayData);
    },
    onChangePagination,
    changePutAwayStatus() {
      this.isPutAway = !this.isPutAway;
    },
    onChange(e) {
      console.log(`checked = ${e.target.value}`);
    },
    async getSelectOpenCountInDayData(data) {
      // 每次请求，清空数据
      this.chartData.xAxisData.length = 0;
      this.chartData.yAxisData.length = 0;
      let res;
      try {
        res = await getSelectOpenCountInDay(data);
      } catch (error) {
        console.log(error);
      }
      let { code } = res;
      if (code == 0) {
        let dataM = getFromDay1ToDay2(
          this.selectOpenCountInDayData.startDate,
          this.selectOpenCountInDayData.endDate
        );
        // 做些什么
        if (res.data.length == 0) {
          dataM.forEach((item) => {
            this.chartData.xAxisData.push(item);
            this.chartData.yAxisData.push(0);
          });
          this.data = [];
          this.pagination.total = 0;
        } else {
          res.data.forEach((item, index) => {
            item["id"] = index;
          });
          this.data = res.data.reverse();
          for (let i = 0; i < dataM.length; i++) {
            let flag = false;
            let index1;
            for (let j = 0; j < res.data.length; j++) {
              if (res.data[j]["date"] == dataM[i]) {
                flag = true;
                index1 = res.data[j]["count"];
                break;
              }
            }
            if (flag) {
              this.chartData.xAxisData.push(dataM[i]);
              this.chartData.yAxisData.push(index1);
            } else {
              this.chartData.xAxisData.push(dataM[i]);
              this.chartData.yAxisData.push(0);
            }
          }
          this.pagination.total = res.data.length;
        }
      }
    },
  },
  async mounted() {
    this.selectOpenCountInDayData.appKey = this.applicationId;
    this.selectOpenCountInDayData.startDate = getYearMonthDayFromOne();
    this.selectOpenCountInDayData.endDate = getYearMonthDay();
    await this.getSelectOpenCountInDayData(this.selectOpenCountInDayData);
  },
};
</script>

<style lang="scss" scoped>
.operationCounts-container {
  margin: 24px 22px 20px;
  padding: 24px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  .operationCounts-tabs {
    position: relative;
    >>> .ant-radio-group {
      position: absolute;
      top: 3px;
      right: 0px;
      padding: 4px 0;
      .ant-radio-button-wrapper {
        margin-right: 8px;
      }
    }
    // chart
    .chart-wrapper {
      background: #fff;
      padding: 75px 0 0;
      margin-bottom: 32px;
    }
  }
  .operationCounts-tables {
    margin: 24px auto 16px;
  }
}
</style>

